<template>
    <div>
        <header>
            <van-icon name="arrow-left" @click="back"/>
            <div></div>
            <span>
                <svg style="width: 25px;height: 25px;" t="1599099562609" class="icon" viewBox="0 0 1024 1024"
                     version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="3408" width="200" height="200"><path
                        d="M908.07 322.438c15.02-26.46 23.626-57.08 23.626-89.716 0.002-99.976-80.52-181.005-179.872-181.005-57.914 0-109.42 27.545-142.304 70.312 123.546 25.678 229.723 99.168 298.587 200.41h-0.036zM414.51 122.03c-32.884-42.768-84.419-70.313-142.333-70.313-99.354 0-179.873 81.03-179.873 181.005 0 32.636 8.6 63.283 23.625 89.716C184.788 221.197 290.94 147.707 414.511 122.03zM512 177.63c-220.201 0-398.712 178.522-398.712 398.733 0 220.21 178.51 398.732 398.712 398.732 220.203 0 398.712-178.52 398.712-398.732 0-220.211-178.51-398.733-398.712-398.733z m188.865 447.506l-226.258-0.03V324.827l58.379 0.055V561.89h167.879v63.247z"
                        fill="" p-id="3409"></path></svg>
                {{time}}
            </span>
            <div class="svg-d">
                <svg @click="sheetShow = true" t="1599102723186" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="4242" width="200" height="200">
                    <path d="M937.472 990.208H86.528V19.456h850.944v970.752z m-826.368-24.576h801.792V44.544H111.104v921.088z"
                          p-id="4243" fill="#707070"></path>
                    <path d="M98.816 148.48H916.48v24.576H98.816zM334.336 399.36h-153.6V245.76h153.6v153.6zM588.8 399.36H435.2V245.76h153.6v153.6zM843.264 399.36h-153.6V245.76h153.6v153.6z"
                          p-id="4244" fill="#707070"></path>
                    <path d="M334.336 645.12h-153.6V491.52h153.6v153.6zM588.8 645.12H435.2V491.52h153.6v153.6zM843.264 645.12h-153.6V491.52h153.6v153.6z"
                          p-id="4245" fill="#707070"></path>
                    <path d="M334.336 890.88h-153.6v-153.6h153.6v153.6zM588.8 890.88H435.2v-153.6h153.6v153.6zM843.264 890.88h-153.6v-153.6h153.6v153.6z"
                          p-id="4246" fill="#707070"></path>
                </svg>
                <svg t="1599102796815" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="5226" width="200" height="200">
                    <path d="M 269.67 949.043 c -39.2192 0 -71.0144 -31.3088 -71.0144 -69.9392 c 0 -1.4592 0.0256 -2.9184 0.128 -4.352 l 14.336 -225.562 l -148.301 -179.789 a 69.1712 69.1712 0 0 1 10.368 -98.3552 a 71.4752 71.4752 0 0 1 27.8272 -13.6448 l 224.256 -54.1696 l 124.544 -195.533 c 20.8384 -32.7168 64.6656 -42.5984 97.8944 -22.0928 c 9.0624 5.6064 16.7424 13.1584 22.4256 22.0928 l 124.57 195.533 l 224.23 54.1696 c 38.0928 9.1904 61.4144 47.0528 52.0704 84.5568 a 68.9664 68.9664 0 0 1 -13.8496 27.4432 l -148.275 179.789 l 13.8752 218.496 c 6.3232 38.2208 -19.9936 74.2144 -58.8032 80.4352 a 69.248 69.248 0 0 1 -11.2896 0.9216 h -0.3584 a 71.7824 71.7824 0 0 1 -25.3184 -4.5568 L 512 863.027 l -217.011 81.4336 a 71.7824 71.7824 0 0 1 -25.3184 4.5568 v 0.0256 Z"
                          fill="#515151" p-id="5227"></path>
                </svg>
                <svg t="1599102844786" class="icon" viewBox="0 0 1024 1024" version="1.1"
                     xmlns="http://www.w3.org/2000/svg" p-id="6659" width="200" height="200">
                    <path d="M947.3 513.4c-9.9-6.5-22.3-7.5-33.1-2.8l-92.4 40.2v-454c0-19.3-15.7-35-35-35H236.2c-19.3 0-35 15.7-35 35v453.4l-91.4-39.7c-10.8-4.7-23.3-3.6-33.1 2.8a35 35 0 0 0-15.8 29.3v384.6c0 19.3 15.7 35 35 35h832.3c19.3 0 35-15.7 35-35V542.6c0-11.8-6-22.8-15.9-29.2zM271.2 131.8h480.6v449.3L512.2 685.3l-241-104.6V131.8z m622 760.4H130.8V596l367.4 159.5c8.9 3.9 19 3.9 27.9 0l367-159.5v296.2z"
                          p-id="6660" fill="#515151"></path>
                    <path d="M511.5 242.9c25.1 0 45.5 20.4 45.5 45.5s-20.4 45.5-45.5 45.5c-19.2 0-34.8 15.4-35 34.6l-0.7 67.6c-0.2 19.3 15.3 35.2 34.6 35.4h0.4c19.2 0 34.8-15.4 35-34.6l0.4-38.2c46.8-15 80.8-58.8 80.8-110.3 0-63.7-51.8-115.5-115.5-115.5S396 224.7 396 288.4c0 19.3 15.7 35 35 35s35-15.7 35-35c0-25.1 20.4-45.5 45.5-45.5zM471.6 557.7a35 35 0 1 0 70 0 35 35 0 1 0-70 0z"
                          p-id="6661" fill="#515151"></path>
                </svg>
            </div>
        </header>

        <div class="wrap">
            <p>
                <span>{{course}}</span>
                <span>
                    <a href="#">{{subjectIndex+1}}</a>/{{length}}
                </span>
            </p>

            <div class="topic">
                <Topics :topicm="subject.ques_stem" :option="subject.ques_option"/>
            </div>

            <h4 class="hh"><span @click="subjectstaBack">上一题</span><span @click="subjectNext">{{subjectIndex < length-1? '下一题':'答题卡'}}</span>
            </h4>
        </div>


        <van-popup v-model="sheetShow" position="right" :style="{ height: '100%',width:'100vw' }">
            <header>
                <van-icon name="arrow-left" @click="sheetShow = false"/>
                <span>答题卡</span>
                <div></div>
            </header>
            <div class="wrap-li">
                <p>
                    <span>{{course}}</span>
                    <span>
                    <a href="#">{{subjectIndex+1}}</a>/{{length}}
                </span>
                </p>
            </div>
            <div class="wrap-sheet">
                <!-- :class="{'cheange':question[].user_answer[0]!==undefined}"-->
                <ul>
                    <li v-for="(item,val,i) in question" @click="topull(i)"
                        :class="{'cheange':item.user_answer[0]!==undefined}">
                        {{i+1}}
                    </li>
                </ul>
            </div>

            <button @click="tj" data-v-05bfabec="" type="button" class="submit">交卷并查看结果</button>
        </van-popup>
    </div>
</template>

<script>
    import Topics from "../../components/topic/Topics";
    import {Toast, Dialog} from 'vant'

    export default {
        name: "Topic",
        components: {
            Topics
        },
        computed: {
            //刷题科目
            course() {
                return this.$store.state.topic.course
            },
            //题目数量
            length() {
                return this.$store.state.topic.length
            },
            //当前题目
            subject() {
                return this.$store.state.topic.subject
            },
            //当前题目的位置
            subjectIndex() {
                return this.$store.state.topic.subjectIndex
            },
            //答题卡
            question() {
                return this.$store.state.topic.question
            },
            //未答题数量
            no() {
                return this.$store.state.topic.no
            }
        },
        data() {
            return {
                time: '00:00',
                times: 0,
                timem: 0,
                sheetShow: false,//显示答题卡
            }
        },
        mounted() {
            let id = this.$route.query.id
            let num = this.$route.query.num
            this.$store.dispatch('GETTOPIC', {
                id,
                num
            })

            this.$store.dispatch('GETCourse', id)

            window.setInterval(() => {
                this.times++;
                if (this.times === 60) {
                    this.timem++;
                    this.times = 0;
                }

                this.time = `${this.timem < 10 ? "0" + this.timem : this.timem}:${this.times < 10 ? "0" + this.times : this.times}`
            }, 1000)
        },
        methods: {
            //下一题
            subjectNext() {
                if (this.subjectIndex < this.length - 1) {
                    this.$store.commit('subjectNext')
                } else {
                    this.sheetShow = true;
                }
            },
            //上一题
            subjectstaBack() {
                if (this.subjectIndex === 0) {
                    Toast('已经是第一题了');
                    return false;
                }
                this.$store.commit('subjectstaBack')
            },
            topull(index) {
                this.$store.commit('Jump', index)
                this.sheetShow = false;
            },
            tj() {
                if (this.no !== 0) {
                    Dialog.confirm({
                        message: `您还有${this.no}道题未做，确认交卷吗？`,
                    }).then(() => {
                        console.log('d')
                    }).catch(() => {

                    });
                }

            },
            //回退
            back() {
                Dialog.confirm({
                    message: '确定退出？退出后未完成的将不会保存，是否确定？',
                }).then(() => {
                    window.history.back();
                }).catch(() => {

                });
            },
        },
        filters: {},
        watch: {}
    }
</script>

<style scoped lang="scss">
    .submit[data-v-05bfabec] {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 1.33333rem;
        height: 13.33333vw;
        background-color: #eb6100;
        border: none;
        text-align: center;
        font-size: .37333rem;
        font-size: 3.73333vw;
        color: #fff;
        line-height: 1.33333rem;
        line-height: 13.33333vw;
        outline: none;
    }

    .wrap-sheet {
        width: 100%;
        margin: 30px 0 0;

        ul {
            display: flex;
            flex-wrap: wrap;


            li {
                margin: 10px 22px;
                display: flex;
                align-items: center;
                justify-content: center;
                border: 1px solid #6c757d;
                width: 12vw;
                height: 12vw;
                border-radius: 10vw;


                &.cheange {
                    background-color: #0097FA;
                    color: #fff;
                }
            }
        }
    }

    .hh {
        width: 90%;
        margin: 40px auto 0;
        display: flex;
        justify-content: space-around;

    }

    .wrap-li {
        width: 100%;
        margin-top: 11.73333vw;
        background-color: #fff;

        p {
            width: 90%;
            padding: 0 5%;
            line-height: 90px;
            display: flex;
            justify-content: space-between;
            border: {
                top: 1px solid #eee;
                bottom: 1px solid #eee;
            };

            a {
                font-size: 40px;
            }
        }
    }

    .wrap {
        width: 100%;
        margin-top: 11.73333vw;
        background-color: #fff;
        height: 92vh;

        p {
            width: 90%;
            padding: 0 5%;
            line-height: 90px;
            display: flex;
            justify-content: space-between;
            border: {
                top: 1px solid #eee;
                bottom: 1px solid #eee;
            };

            a {
                font-size: 40px;
            }
        }
    }

    header {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        background: #fff;
        font-size: 4vw;
        top: 0;
        height: 11.73333vw;
        box-sizing: border-box;
        position: fixed;
        z-index: 9;
        background: #fff;
        border-bottom: 1px solid #f0f2f5;

        .svg-d {
            width: 35%;
            display: flex;
            justify-content: space-around;

            svg {
                width: 30px;
                height: 30px;
                fill: #c7c6c6 !important;
            }
        }

        span {
            position: absolute;
            width: 23%;
            left: 50%;
            transform: translateX(-30%);
            display: flex;
            align-items: center;


            svg {
                width: 20px;
                height: 20px;
                fill: #c7c6c6;
                margin-right: 5px;
            }
        }
    }
</style>